最近在写网易云音乐微信小程序，发现项目中少了点什么东西，于是爆肝了几天，参考了很多网上的写法，最终实现了这个简单的登录功能！

注意，微信小程序是没有登出功能的，害的我找了半天的api，在平时的是使用中，退出小程序直接点右上角的小圆点，只要你第一次授权登录了，下次登录基本会记住你的头像信息，当然也不排除一些很蛋疼的小程序，每次都要重复授权！！

话不多说，请看代码

index.vue

<template>
 <view class="index">
  <musichead title="网易云音乐" :icon="false"></musichead>
  <view class="container">
   <scroll-view scroll-y="true">
    <!--登录-->
    <view class="index-login">
     <view class="index-login-left">
      <image class="index-login-left-img" :src="userInfo.avatarUrl"></image>
     </view>
     <text class="idnex-login-text">{{ userInfo.nickName ||  '未登录' }}</text>
     <!--#ifdef MP-WEIXIN--> 
      <button type="sumbit" plain="true" size="mini" open-type="getUserInfo" @tap="login" @click="change" >{{ logState }}</button>
     <!--#endif-->
    </view>
   </scroll-view>
  </view>
 </view>
</template>
<script>
 // 引入css
 import '../../common/iconfont.css'
 // 引入接口
 import { topList } from '../../common/api.js'
 export default {
  data() {
   return {
    topList : [],
    userInfo : {},
    logState : '立即登录',
   };
  },
  onLoad(){ }，
  methods: {
   // 登录部分
   login(){
    // 获取code 小程序专有，用户登录凭证。
    uni.getUserProfile({
     desc: "获取用户基本资料",
     success : (res)=>{
      this.userInfo = res.userInfo;
     },
     // 用户取消登录后的提示
     fail: (res)=>{
      uni.showModal({
       title:"授权用户信息失败！",
       // 是否显示取消按钮，默认为 true
       showCancel:false
      })
     }
    })
    //获取成功基本资料后开启登录，基本资料首先要授权
    uni.login({
     provider : 'weixin',
     success : (res)=>{
      console.log(res);
      if(res.errMsg == "login:ok"){
       let code =res.code;
      }
     }
    })
   },
   // 退出登录
   change(){
    // 这里只是改变了按钮文字内容，真正退出需要清除token，回到首页,还没找到头绪怎么做
    this.logState = '已登录';
   }
  }
</script>
<style>
     /*登录*/
     .index-login{ margin: auto; width:379px; }
     .index-login-left{ width:35px; height:35px;  position: absolute; overflow: hidden; background: url(../../static/user.png); }
     .index-login-left-img{ width:35px; height:35px;  border-radius: 50%; }
     .index-login-img-text{ font-size:34px; color:#dddddd; }
     .idnex-login-text{ font-size:14px; vertical-align: sub; margin-left: 45px; color:#888; }
     .index-login button{ float:right; border:1px #dddddd solid; border-radius: 30px; }
</style>